<template lang='pug'>
  .page
    .search-form.mb-10.pl-10.pr-10
      Row(type="flex" justify="start")
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w80 客户名称：
          Input(v-model="companyName"  placeholder="请输入客户名称" clearable)
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w80 收入类型：
          Select(v-model="incomeTypeAxs" placeholder="请选择收入类型" clearable)
            Option(v-for="(item, index) in incoimeTypeAxs_arr" :value="item.key" :key="index") {{ item.value }}
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w80 合同名称：
          Input(v-model="contractName"  placeholder="请输入合同名称" clearable)
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w100 申报单位名称：
          Input(v-model="declareUnitName"  placeholder="请输申报单位名称" clearable)
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w80 同步状态：
          Select(v-model="status" placeholder="请选择状态" clearable)
            Option(v-for="(item, index) in taskStatus_arr" :value="item.key" :key="index") {{ item.value }}
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          Button(type="info" @click="findBtn") 查询
    .pl-20.pr-20.bg-white
      Table.hasTitle-table.beautiful-table(width="100%" :loading="loading" stripe :columns="thead" :data="listData")
        div(slot="header")
          .pull-left.table-title-lefttxt
            span.leftText
              | 总条数:
              span.text-info.pl-5.pr-5.font-weight {{codeTotal}}
        .clearfix.pl-20.pr-20(slot="footer")
          Page(:total="codeTotal" :current="PageIndex" :page-size="PageSize" prev-text="上一页" next-text="下一页" @on-change="pageChangeFn" show-total @on-page-size-change="onpageSizeChange" show-sizer :page-size-opts="[10, 20, 30, 50, 100]")
</template>

<script>
  import dataApi from '@/api/data.js'
  import TaskApi from '@/api/Task.api.js'

  export default {
    name:'Task_PlanList',
    props:{},
    watch: {},
    data () {
      return {
        loading: false,

        companyName: '',
        cooperateType: '',
        incomeTypeAxs: '',
        incoimeTypeAxs_arr: [],
        contractName: '',
        declareUnitName: '',
        status: '',
        taskStatus_arr: [],
        thead: [
          {
            title: '客户名称',
            minWidth: 200,
            align: 'center',
            key: 'companyName'
          },
          {
            title: '合同名称',
            minWidth: 150,
            align: 'center',
            key: 'contractName'
          },
          {
            title: '收入类型',
            minWidth: 100,
            align: 'center',
            key: 'typeName'
          },
          {
            title: '薪酬方案名称',
            minWidth: 130,
            align: 'center',
            key: 'planName'
          },
          {
            title: '法务实体名称',
            minWidth: 200,
            align: 'center',
            key: 'axsLegalEntityName'
          },
          {
            title: '申报单位名称类型',
            minWidth: 200,
            align: 'center',
            key: 'declareUnitTypeName'
          },
          {
            title: '申报单位名称',
            minWidth: 200,
            align: 'center',
            key: 'declareUnitName'
          },
          {
            title: '纳税人识别号',
            minWidth: 200,
            align: 'center',
            key: 'taxAccount'
          },
          {
            title: '业务发生时间',
            minWidth: 200,
            align: 'center',
            render: (h, params) => {
            let row = params.row
            let times = ''
            if (row && row.createdOn) {
              times = row.createdOn.slice(0, 19).replace(/T/g, ' ')
            }
            return h('span', times)
          }
          },
          {
            title: '同步次数',
            minWidth: 100,
            align: 'center',
            key: 'count'
          },
          {
            title: '执行失败次数',
            minWidth: 120,
            align: 'center',
            key: 'failCount'
          },
          {
            title: '最近同步时间',
            minWidth: 200,
            tooltip: true,
            align: 'center',
            key: 'lastSyncTime'
          },
          {
            title: '同步状态',
            minWidth: 120,
            tooltip: true,
            align: 'center',
            key: 'statusName'
          }
        ],
        listData: [],
        codeTotal: 0,
        PageIndex: 1,
        PageSize: 10
      }
    },

    components: {},

    computed: {},

    beforeMount() {},

    mounted() {
      this.getList()
      this.getEnum()
    },

    methods: {
      getList () {
        this.loading = true
        TaskApi.GetPlanList({
          DeclareUnitName: this.declareUnitName,
          CompanyName: this.companyName,
          Type: this.incomeTypeAxs,
          Status: this.status,
          ContractName: this.contractName,
          PageIndex: this.PageIndex,
          PageSize: this.PageSize
        }).then(res => {
          this.loading = false
          if (res.data.success) {
            this.listData = res.data.data
            this.codeTotal = res.data.totalRows
          } else {
            this.$Message.error(res.data.message)
          }
        })
      },
      findBtn () {
        this.PageIndex = 1
        this.getList()
      },
      pageChangeFn (val) {
        this.PageIndex = val
        this.getList()
      },
      onpageSizeChange (val) {
        this.PageSize = val
        this.getList()
      },
      /**
       * 数据字典
       */
      getEnum () {
        let groupNames = 'task.plan'
        dataApi.getEnum({
          groupName: groupNames
        }).then((res) => {
          console.log(res)
          this.incoimeTypeAxs_arr = this.getItems(res.data, 'task.plan.IncomeType')
          this.taskStatus_arr = this.getItems(res.data, 'task.plan.Status')
        })
      },
      getItems (arr, key) {
        let object = arr.find((item) => {
          return item.group === key
        })
        return object.items
      }
    }


  }

</script>
<style lang='less' scoped>

</style>